Adding Background Elements to a Chart

To add background elements to a chart, use the BackgroundElements property. Background elements are displayed in the chart area only—not the legend, axis or title areas. This makes background elements ideal for displaying items that need to be shown alongside the data but are not associated with a particular data series.

A common use of the BackgroundElements collection is to display grid lines using a ChartGrid. The ChartGrid draws lines at each tick mark on the chart axes. To suppress lines in a particular direction, set the associated brush to Transparent. For example, to show horizontal grid lines only, set VerticalGridLineBrush=”Transparent”. Grid bands can be coloured in rotation using the HorizontalStripeBrushes and VerticalStripeBrushes properties.

You can also use the MarkedStripeGrid as a background element to display bands of color behind the chart, to help your users place the series data in context. For example, you might create colored bands for expected, lower than expected and higher than expected ranges. MarkedStripeGrid differs from ChartGrid in that it is not tied to tick marks and does not repeat color bands in rotation.

You are not restricted to these two components: you can place any UIElement in the BackgroundElements collection. You can also combine elements to achieve a desired visual effect. The following example uses a MarkedStripeGrid to show bands, and a ChartGrid to superimpose horizontal grid lines to improve readability.

CopyDrawing colored bands on a bar chart
<ms:Chart>
  <ms:Chart.Series>
    <ms:BarSeries ItemsSource="{Binding}" />
  </ms:Chart.Series>
  <ms:Chart.YAxis>
    <ms:ChartAxis Minimum="0" Maximum="10" />
  </ms:Chart.YAxis>
  <ms:Chart.BackgroundElements>
    <ms:MarkedStripeGrid>
      <ms:MarkedStripeGrid.MarkedStripes>
        <ms:MarkedStripe Value="2" Background="#D99694" />
        <ms:MarkedStripe Value="5" Background="#FAC08F" />
        <ms:MarkedStripe Value="10" Background="#C3D69B" />
      </ms:MarkedStripeGrid.MarkedStripes>
    </ms:MarkedStripeGrid>
    <ms:ChartGrid VerticalGridLineBrush="Transparent" />
  </ms:Chart.BackgroundElements>
</ms:Chart>

The BackgroundElements property differs from the Background property in that elements are shown only on the chart area, not over the entire Chart control, and in that it supports arbitrary UIElements, not just brushes.
 

For an example of using BackgroundElements, see the MarkedStripeGrid page in the ChartingSampleExplorer sample.

Adding Foreground Elements to a Chart

The Chart control has a ForegroundElements collection similar to the BackgroundElements collection described above. Foreground elements are displayed above the chart area (again, excluding areas such as the legend, axes and title).

Foreground elements should usually be largely transparent so as not to obscure the chart. A foreground element will interfere with selection unless IsHitTestVisible is set to false.

For an example of using ForegroundElements, see the CustomForegroundElements page in the ChartingSampleExplorer sample.